import router from './router'
import store from './store'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
// 引入 工具方法getPageTitle
// 引入所有的动态路由表(未经过筛选)
import { asyncRoutes } from '@/router'
import getPageTitle from '@/utils/get-page-title'
// 让页面小圆圈消失
NProgress.configure({ showSpinner: false }) // NProgress Configuration
// 创建一个白名单数组,存放不需要token就可以访问的页面
const whiteList = ['/login', '/404', 'abcdecy']
router.beforeEach(async(to, from, next) => {
//   console.log('路由跳转,一定会经过这里', to, from, next)
// 1.如果有token&&去登录页面   ===> 让它去主页
// 2.如果没有token&&去的不是登录 ===> 让它去登录页面
// 路由跳转进度条开始
  NProgress.start()
  const token = store.state.user.token
  // 如果有token与去登录页面,去主页
  if (token && to.path === '/login') {
    console.log('有了token,login就不能访问!')
    next('/')
    // 路由跳转进度条结束
    NProgress.done()
    // 如果没有token与不去登录页面,去登录页面
  } else if (!token && whiteList.includes(to.path) === false) {
    console.log('没有token,登录 && 访问的页面不是 : /login,/404,/abcdecy 中的一个')
    next('/login')
    // 路由跳转进度条结束
    NProgress.done()
    // 两种都不是,就放行通过
  } else {
    // 调用action,获取用户个人信息,保存到vuex,获取用户头像
    // if('没有用户信息')
    if (!store.state.user.userInfo.userId && token) {
      // 获取到用户的基本信息
      const menus = await store.dispatch('user/getUserInfo')
      // console.log(store.state.user.userInfo.roleIds.menus)
      // ['employess',''attendances']
      // console.log(asyncRoutes)
      // console.log(menus)
      // 改写成动态添加的方式,用户能访问的页面
      // this.$router.addRoutes([{路由配置}])
      // 过滤员工有的角色权限路由
      // 根据本用户实际的权限menus去 asyncRoutes中做过滤，选出本用户能访问的页面
      // const filterRouters = menus.map(name => {
      //   console.log(name)
      //   return asyncRoutes.find(item => item.children[0].name === name)
      // })
      const filterRouters = asyncRoutes.filter(route => {
        const routeName = route.children[0].name
        // console.log(routeName)
        return menus.includes(routeName)
      })
      // 在filterRoutes数组路由的最后面加上404
      // 404 page must be placed at the end !!!
      filterRouters.push({ path: '*', redirect: '/404', hidden: true })
      // addRoutes用来动态添加路由配置
      // 只有在这里设置了补充了路由配置，才可能去访问页面
      // 它们不会出现左侧
      router.addRoutes(filterRouters)
      // 根据用户实际能访问几个页面来决定从整体8个路由设置中，过滤出来几个，然后保存到vuex中
      store.commit('menu/setMenuList', filterRouters)
      // 解决刷新出现的白屏bug
      next({
        ...to, // next({ ...to })的目的,是保证路由添加完了再进入页面 (可以理解为重进一次)
        replace: true // 重进一次, 不保留重复历史
      })
    } else {
      next()
    }
    // 路由跳转进度条结束
  }
})
// 动态设置title标题
router.beforeEach((to, from, next) => {
  // console.log(to)
  // 动态标题document.title = ???
  document.title = getPageTitle(to.meta.title)
  next()
})
// 页面跳转结束时
router.afterEach((to, form) => {
// 路由跳转进度条结束
  NProgress.done()
})
